<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>森林保卫战</title>
    <style type="text/css">
    
        body {
            overflow: hidden;
        }
        .zhu{
            width: 1000px;
            height: 500px;
            background-image: url(森林保卫战/背景草坪.png);
            margin:100px auto;
            position: relative;
        }
        .input1{
            width: 50px;
    height: 50px;
    text-align: center;
    font-size: 30px;
    float: left;
        }
        span{
            color: #fff;
    font-size: 30px;
    font-family: cursive;
    margin-left: 60px;
    float: left;
    margin-top: -10px;
        }
        .dengji{
            padding-top: 25px;
            height: 90px;
        }
        .xue{
            width: 210px;
    height: 30px;
    background-color: red;
   
    float: left;
    margin-left: 350px;
    margin-top: -30px;
        }
        #box1{
        width:0;
        border-right: 30px solid #6c6;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        float: left;
        position: absolute;
        right: 100px;
        cursor: pointer;
    }
    #box2{
        width: 40px;
        height: 60px;
        background-color: #6c6;
        float: left;
        position: absolute;
        right: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
    }
    #box3{
        width:0;
        border-left: 30px solid #6c6;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        float: left;
        position: absolute;
        right: 30px;
        cursor: pointer;
    }#box4{
        width:0;
        border-right: 30px solid #6c6;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        float: left;
        position: absolute;
        right: 210px;
        cursor: pointer;
    }
    #box5{
        width: 40px;
        height: 60px;
        background-color: #6c6;
        float: left;
        position: absolute;
        right: 170px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
    }
    #box6{
        width:0;
        border-left: 30px solid #6c6;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        float: left;
        position: absolute;
        right: 140px;
        cursor: pointer;
    }
    ul{
        list-style: none;
    }
    .col-md-12{
         width: 100%;
        float: left;
    }
    .tu{
        position: absolute;
        left: 145px;
        top: 230px;
    }
    .lan{
        width: 5px;
    height: 325px;
    background-color: #000;
    position: absolute;
    top: 110px;
    left: 250px;
    border-radius: 15px;
    }
    .span{
        position: absolute;
    right: 71px;
    bottom: 20px;
    }
    .input2{
        width: 50px;
    height: 50px;
    text-align: center;
    font-size: 30px;
    position: absolute;
    right: 20px;
    bottom: 10px;
    
    }
    #laoshu0{
        position: absolute;
        right: 0;
       top: 100px;
       
    }
     #laoshu1{
        position: absolute;
        right: 0;
       top: 200px;
       
    }
     #laoshu2{
        position: absolute;
        right: 0;
        top: 300px;
        
    }
     #laoshu3{
        position: absolute;
        right: 0;
        top: 400px;
       
    }
    #jian{
        position: absolute;
    left: 90px;
    top: 48px;
    }
    .tupian{
            position: absolute;
    width: 35px;
    height: 35px;
    top: 4px;
    left: 4px;
    }
    .tan{
        position: absolute;
        top:100px;
        left: 300px;
        display: none;
    }
    .chu{
        display: block;
    }
    .tan1{
        position: absolute;
        top:100px;
        left: 300px;
        display: none;
    }
    .chu1{
        display: block;
    }
    ul{
            list-style: none;
        }
        .img-tan{
            position: relative;
        }
        .b{
            position: absolute;
            top:220px;
            left:240px;
            font-size: 25px;
            color: #fff;
        }
        .a{
            position: absolute;
            top: 220px;
            left: 85px;
            font-size: 25px;
            color: #fff;
        }
        .d{
            position: absolute;
            top:220px;
            left:150px;
            font-size: 25px;
            color: #fff;
        }
        .f{
            position: absolute;
            top:220px;
            left:280px;
            font-size: 25px;
            color: #fff;
        }
        .s{
            position: absolute;
            top: 220px;
            left: 60px;
            font-size: 25px;
            color: #fff;
        }
        .input3{
            margin-left: -134px;
        }
    button:hover{
                cursor: pointer;
            }
            .span1{
                margin-left: 700px;
                margin-top: -30px;
            }
            #djs{
                margin-top: -28px;
                margin-left: 0px;
            }
    </style>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" >
    
         var i = 0;
        
         $(window).keydown(function(event){
                var test = $("#tu");
                var text = $("#jian");
                var laoshu = '';/*设置一个变量名laoshu为空*/
                $('.laoshu').each(function() {
                    /*找到class+laoshu的语句并找到匹配元素规定运行的函数*/
                    laoshu += $(this).offset().top + ',';/*匹配元素在当前画面的相对偏移*/
                });
                laoshu = laoshu.substring(0, laoshu.length - 1);/*提取字符串中介于连个制定下标之间的字符，laoshu的位置     老鼠位置长度-1*/
                var keyNum = event.which;/*显示按了那个键*/
                test.css({
                 position: 'absolute',
                 }); 
                
             switch(keyNum) { //判断按键
              case 38:
                test.animate({top: '-=20px'});
                text.animate({top: '-=20px'});
             break;

             case 40:
                test.animate({top: '+=20px'});
                text.animate({top: '+=20px'});
             break;
            default:
                break;
             } 
             text.css({
                 position: 'absolute',
                 }); 
             
             switch(keyNum) { //判断按键
              case 13:
                text.animate({left: '814px'}, function() {
                    //alert($(this).offset().top - 108);
                    //alert(laoshu.indexOf($(this).offset().top - 108));
                    if (($(this).offset().top - 98) == 100) {
                        $('#laoshu0').hide();/*射老鼠   根据图片的差值*/
                    }
                    if (($(this).offset().top - 98) == 200) {
                        $('#laoshu1').hide();
                    }
                    if (($(this).offset().top - 98) == 300) {
                        $('#laoshu2').hide();
                    }
                    if (($(this).offset().top - 98) == 400) {
                        $('#laoshu3').hide();
                    }
                    $(this).hide();
                    $(this).css('left', '90px');
                    $(this).show();
                });
             break;

             case 32:
            text.animate({left: '814px'}, function() {
                if (($(this).offset().top - 98) == 100) {
                    $('#laoshu0').hide();
                }
                if (($(this).offset().top - 98) == 200) {
                    $('#laoshu1').hide();
                }
                if (($(this).offset().top - 98) == 300) {
                    $('#laoshu2').hide();
                }
                if (($(this).offset().top - 98) == 400) {
                    $('#laoshu3').hide();
                }
                $(this).hide();
                $(this).css('left', '90px');
                $(this).show();
            });
             break;
            default:
                break;
             } 
});
         
    $(document).ready(function(){
        setTimeout(function () { abc(); }, 2000);
    });
    function abc(){
            $("#laoshu0").animate({left:'250px'},13000);
            $("#laoshu1").animate({left:'250px'},14900);
            $("#laoshu2").animate({left:'250px'},11000);
            $("#laoshu3").animate({left:'250px'},16300);
       
            $('#laoshu0').hide(1000,function(){
                $(this).css('left', '936px');
                $(this).show();
                
                var xue = $('.xue').width();
                if (xue <= 0) {
                    handleEvent();
                } else {
                    abc();
                    $('.xue').css('width', (xue - 21) + 'px');
                }
            });
            $('#laoshu1').hide(1000,function(){
                 $(this).css('left', '936px');
                 $(this).show();
                 var xue = $('.xue').width();
                if (xue <= 0) {
                    handleEvent();
                } else {
                    abc();
                    $('.xue').css('width', (xue - 21) + 'px');
                }
            });
            $('#laoshu2').hide(1000,function(){
               $(this).css('left', '936px');
               $(this).show();
               var xue = $('.xue').width();
                if (xue <= 0) {
                    handleEvent();
                } else {
                    abc();
                    $('.xue').css('width', (xue - 21) + 'px');
                }
            });
            $('#laoshu3').hide(1000,function(){
                $(this).css('left', '936px');
                $(this).show();
                var xue = $('.xue').width();
                if (xue <= 0) {
                    handleEvent();
                } else {
                    abc();
                    $('.xue').css('width', (xue - 21) + 'px');
                }
            });
      }
     
    function handleEvent () {
        if ($('.tree').length > 0) {
            $('.tree').eq($('.tree').length - 1).remove();
            $('.xue').width(0);
            $(".tan").addClass("chu");
        }
    }
    $(function(){
        if($("#djs").val() >= 0 && $(".tree").length > 0){
             $(".tan1").addClass("chu1");
        }
    })
    
    

    </script>
    <script type="text/javascript">   
            var game_time;//游戏总时长
            var game_start;//游戏开始时间
            var djs_span;//显示倒计时
            var id;//计时器id
            var game_djs;//游戏倒计时
            var isZT = false;//判断是否为暂停，false表示未点击暂停
            var zt_time;//暂停时的倒计时值
            var jx_id;//继续游戏的倒计时id
            var startBtn;//游戏开始按钮

            window.onload = function(){

                djs_span = document.getElementById("djs");
                //暂停游戏
                var zt = document.getElementById("zt");
                //开始游戏
                startBtn = document.getElementById("btn");

                startBtn.onclick = function(){

                    clearTimeout(jx_id);

                    if(isZT){
                        var reset = confirm("您的游戏正在进行中，确定要重新开始吗？");
                        if(reset){
                            zt.textContent = "暂停游戏";
                            isZT = false;
                        }else{
                            return;
                        }
                    }

                    //获取游戏总时长
                    game_time = document.getElementById("time").value*60;
                    //记录游戏开始时间
                    game_start = new Date();
                    //禁用开始按钮
                    startBtn.disabled = true;
                    djs();
                }

                //停止游戏
                document.getElementById("stop").onclick = function(){
                    game_stop();
                    //还原开始按钮
                    startBtn.disabled = false;
                }

                zt.onclick = function(){
                    game_zt();
                    if(isZT){
                        //点击继续按钮
                        zt.textContent = "暂停游戏";
                        isZT = false;
                        //禁用开始按钮
                        startBtn.disabled = true;
                        //记录继续游戏开始时间
                        game_start = new Date();
                        game_jx();
                    }else{
                        //点击暂停按钮
                        zt.textContent = "继续游戏";
                        isZT = true;
                        //还原开始按钮
                        startBtn.disabled = false;
                        //记录暂停时间
                        zt_time = game_djs;
                        game_zt();
                    }
                }
            }


            //倒计时方法
            function djs(){

                //获取游戏进行时
                var playing = new Date();

                game_djs = game_time - parseInt((playing - game_start)/1000);

                djs_span.innerHTML = game_djs;

                id = setTimeout("djs()",1000);//步长

                //游戏结束
                if(game_djs<1){
                    clearTimeout(id);
                    alert("游戏结束");
                }

            }

            //暂停游戏
            function game_zt(){
                clearTimeout(id);
                clearTimeout(jx_id);
            }

            //继续游戏
            function game_jx(){
                //获取游戏进行时
                var playing = new Date();

                game_djs = zt_time - parseInt((playing - game_start)/1000);

                djs_span.innerHTML = game_djs;

                jx_id = setTimeout("game_jx()",1000);//步长

                //游戏结束
                if(game_djs<1){
                    clearTimeout(jx_id);
                    alert("游戏结束");
                }
            }

            //游戏结束
            function game_stop(){
                clearTimeout(id);
                clearTimeout(jx_id);
                game_djs = 0;
                djs_span.innerHTML = game_djs;
            }
            
    </script>
</head>
<body bgcolor="#7fe569">

<div class="zhu">
    <div class="dengji col-md-12" >
      <a href="首页.html"><img src="森林保卫战/timg.jpg" class="tupian"></a>
      <span>游戏时长：</span><input id="time" type="text" size="5px" value="1" class="input3" /><span>分钟</span><br />
        <span class="span1">游戏倒计时：</span>
        <span id="djs"></span>
        <span style="margin-top: -30px">秒</span><br />
        <button id="btn">开始游戏</button>
        
      <div class="xue">
      </div>
      
     </div>
     <div class="tuzi">
        <ul>
            <li><img class="tree" src="森林保卫战/橘子树.png" width="80px" height="80px" style="position: absolute; top:230px;left: 50px"></li>
            <!--<li><img class="tree" src="森林保卫战/梨树.png" width="80px" height="80px"></li>
            <li><img class="tree" src="森林保卫战/柠檬树.png" width="80px" height="80px" style="position: absolute; "></li>-->
        </ul>
        <img src="badguy.png" id="laoshu0">
      <img src="badguy.png" id="laoshu1" >
      <img src="badguy.png" id="laoshu2">
      <img src="badguy.png" id="laoshu3">
        <div class="tu">
        <img src="森林保卫战/熊大熊二.png" width="150px" height="100px" id="tu">
        <img src="bullet.png" id="jian"> 
        </div>
        <div class="lan"></div>
     </div>
     <div class="tan">
    <img src="森林保卫战/失败图.png"  width="400px" height="270px" class="img-tan">
    <ul>
       <a href="首页.html"><li class="a">退出</li></a>
       <a href="游戏开始.html"><li class="b">重新开始</li></a>
    </ul>

</div>
<div class="tan1">
    <img src="森林保卫战/胜利图.png"  width="400px" height="270px" class="img-tan">
    <ul>
       <a href="首页.html"><li class="s">退出</li></a>
       <a href="游戏开始.html"><li class="d">重新开始</li></a>
       <a href="游戏开始1.html"><li class="f">下一关</li></a>
    </ul>

</div>

</div>
</body>
</html>